<script setup>
import { ref, defineProps, computed, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import Toast from '@vant/weapp/dist/toast/toast';

const props = defineProps({
  bgImgList: Array,
  active: Number,
  status: Number
})
const emit = defineEmits(['operate', 'removeMask', 'downloadImage', 'cancel'])
const eliminateShow = ref(1)
const brushSize = ref(5)
const item = ref({})
let isCanPrev = computed(() => {
  return props.active > -1
})
let isCanNext = computed(() => {
  return props.active < props.bgImgList.length - 1;
})
// watch(props.active, () => {
//   isCanNext.value = !(props.active < props.bgImgList.length - 1);
//   console.log('isCanNext', isCanNext.value)
// })
// watch(props.bgImgList, () => {
//   isCanNext.value = !(props.active < props.bgImgList.length - 1);
//   console.log('isCanNext', isCanNext.value)
// })
const onDrag = (e) => {
  console.log('e', e.detail.value);
  brushSize.value = e.detail.value
}
let isDownload = ref(false);
const onChange = (e) => {
  brushSize.value = e.detail
  emit('setBrushSize', brushSize.value)
}
let isNormalShow = computed(() => {
  return props.status > -10 && props.status < 2 ? true : false;
})

let isShowConfirm = computed(() => {
  return props.status > -10 ? true : false;
})
let isCanConfirm = computed(() => {
  return props.status == 1;
})
  // v-show="status > -10 && isDownload != true"
  // watch(props.status, () => {
  //   if (props.status >= -10) {
  //     isNormalShow.value = true;
  //   }
  // })
  // watch(isDownload, () => {gg
  //   isNormalShow.value = isDownload 





  != true;
// })
/**
 * @description 消除图片
 */
const eliminateFn = (e) => {
  emit('removeMask', e);
}
function operate(type) {
  if (type == 'undo' && !isCanPrev.value) {
    return Toast.fail('没有上一步')
  } else if (type == 'next' && !isCanNext.value) {
    return Toast.fail('没有下一步')
  }
  emit('operate', type);
}
function cancel() {
  emit('cancel');
}
function downloadImage() {
  emit('downloadImage');
}
function confirm() {
  isDownload = true;
  if (!isCanConfirm.value) return;
  emit('confirm');
}
function compare() {
  let val = props.status == 2 ? 3 : 2;
  emit('compare', val);
}
onLoad((e) => {
  item.value = JSON.parse(e.item)
  // operate3();
})
defineExpose({ brushSize })
</script>

<template>
  <!-- islowndoad:{{ isDownload }},status是多少{{ status }},isCanConfirm:{{ isCanConfirm }} -->
  <!-- isCanPrev--{{ isCanPrev }}
      status--{{ status }}-active:{{ active }}--bg--{{ bgImgList.length }} -->
  <!-- active:{{ active }} -->
  <div>
    <!-- <div class="saveImage-header-right" v-show="isDownload" @click="compare">
      <i class="iconfont ai-icon-qianhouduibi"></i>
      <p class="contrast">对比</p>
    </div> -->

    <div class="brush" v-if="isNormalShow">
      <p class="text">画笔大小</p>
      <div class="slider">
        <van-slider :value="brushSize" max="10" @change="onChange" @drag="onDrag" bar-height="8" />
      </div>
    </div>
    <div v-if="isNormalShow" class="desc">涂抹图片中不想要的部分，然后点击消除即可</div>

  </div>


  <!--AI消除按钮-->
  <myButton v-if="status <= 1" :id="item.id" @click="eliminateFn">AI消除</myButton>
  <div class="btn save" v-else @click="downloadImage">
    保存图片
  </div>
</template>

<style lang="less" scoped>
.desc {
  margin-top: 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: var(--a-one-text-color);
  letter-spacing: 0.5rpx;
}



.fixed {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 360rpx;
  padding: 30rpx 40rpx 0;
  background-color: var(--a-main-tabNav-bg-color);

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--a-one-text-color);

    &.confirm {
      justify-content: flex-end;
    }

    .iconfont:nth-child(2),
    :nth-child(3) {
      font-size: 52rpx;

    }
  }




}

.btn {
  box-sizing: border-box;
  width: 600rpx;
  height: 86rpx;
  border-radius: 44rpx;
  text-align: center;
  background: var(--a-main-color);
  color: var(--a-one-text-color);
  padding: 5rpx 0 0;
  margin: 25rpx auto 0;

  &.save {
    line-height: 86rpx;
  }

  .text {
    font-size: 32rpx;
  }

  .one {
    font-size: 20rpx;
  }
}
</style>